<template>
    <div class="right" ref="right">
        <!-- 内容盒子 -->
        <div ref="wraper">
            <div v-for="(item,key) in list" :key="key">
                <h4>{{key}}</h4>
                <product v-for="v in item" 
                    :title="v.title"
                    :pic="v.pic"
                    :price="v.price"
                    :desc="v.desc"
                    :key="v.id"
                    :id="v.id"
                ></product>
            </div>
        </div>
    </div>
</template>

<script>
import product from './product.vue';
import Betterscroll from 'better-scroll';
export default {
    props:['list'],
    components:{
        product
    },
    mounted(){
        this.bs = new Betterscroll(this.$refs.right,{
            click:true,
            scrollY:true
        })

        this.$bus.$on('scrollToElement',(index) => {
            //指定的元素  事件   x轴的位置 数字/true   y轴的位置  数字/true
            this.bs.scrollToElement(this.$refs.wraper.children[index],0,0,0)
        })
    },
    watch:{
        list(){ 
            //刷新  确保有了真实的的dom
            this.$nextTick(() => {
                this.bs.refresh();
            })
        }
    }
}
</script>